import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import MainPage from './main';
import ProfilePage from './profile';
import Icon from "react-native-vector-icons/MaterialCommunityIcons";
import ProfilePageHeaderRight from './profile-page-header-right';
import ViewPage from './view';

const BOTTOM_ACTIVE_COLOR = "#007AFF";
const BOTTOM_INACTIVE_COLOR = "#8E8E93";

function BottomIcon({ focused, name }: { focused: boolean, name: string }) {
  return <Icon name={name} size={24} color={focused ? BOTTOM_ACTIVE_COLOR : BOTTOM_INACTIVE_COLOR} />;
}

const BottomTabs = createBottomTabNavigator({
  initialRouteName: "/home/main",
  screens: {
    "/home/main": {
      screen: MainPage,
      options: {
        headerShown: false,
        title: "首页",
        tabBarIcon: ({ focused }) => <BottomIcon focused={focused} name="home-outline" />
      }
    },
    "/home/view": {
      screen: ViewPage,
      options: {
        title: "视图",
        tabBarIcon: ({ focused }) => <BottomIcon focused={focused} name="view-grid-outline" />
      }
    },
    "/home/profile": {
      screen: ProfilePage,
      options: {
        title: "我的",
        tabBarIcon: ({ focused }) => <BottomIcon focused={focused} name="account-outline" />,
        headerRight: () => <ProfilePageHeaderRight />,
        headerStyle: { backgroundColor: "pink" }
      }
    }
  }
});

export default BottomTabs;
